import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Row, Col, Tooltip, Spin } from 'antd';
import 'moment/locale/zh-cn';
import { PrimaryGhostC, TableC, SecondHeaderC, InfoTipsC } from '../../../../../comps';
import '../../index.less';
import { findTitleByValue } from '../../../../../utils/utils';
import config from '../InitFormC/config';
import configBarra from '../../../../workStation/Barra/combinatorialAnalysis/mycomps/settingC/config';

@connect(({ portfolioOptimizationM, loading }) => ({
  portfolioOptimizationM,
  loading,
}))
export default class TotalTableC extends PureComponent {
  state = {
    columns: [
      {
        key: 'portfolioName',
        title: '组合名称',
      },
      {
        key: 'optimizeObject',
        title: '优化模型',
      },
      {
        key: 'optimizationGoals',
        title: '优化目标',
      },
      {
        key: 'analysisTime',
        title: '分析时间',
        type: 'date',
        formatStr: 'YYYY-MM-DD HH:mm:ss',
      },
    ],
    dataSource: [],
    detailId: undefined, // 详情id
  };

  componentDidMount() {
    this.queryMyTableList(); // 查询分析列表
  }

  componentWillUnmount() {
    // 离开前清除models数据
  }

  UNSAFE_componentWillReceiveProps(nextProps) {}

  queryMyTableList = () => {
    this.props.dispatch({
      type: 'portfolioOptimizationM/queryMyTableList',
      payload: { fromBarra: this.props.fromBarra },
      callback: (data) => {
        this.setState({
          dataSource: data || [],
          detailId: data?.length ? data[0].id : undefined,
        });
        this.props.getRow(data?.length ? data[0] : undefined);
      },
    });
  };

  renderTable = () => {
    const { columns = [], dataSource = [] } = this.state;
    const { loading } = this.props;
    columns &&
      columns.map((item) => {
        if (item.key === 'optimizeObject' || item.key === 'optimizationGoals') {
          item.render = (text) => {
            return findTitleByValue(text, this.props.fromBarra ? configBarra[item.key] : config[item.key]);
          };
        }
      });
    if (columns?.length && columns[columns.length - 1].key !== 'operate') {
      columns.push({
        key: 'operate',
        title: '操作',
        type: 'operate',
        operates: [
          {
            title: '查看设置',
            onClick: (record) => {
              this.querySetting(record.id, 'query');
            },
          },
          {
            title: '编辑设置',
            onClick: (record) => {
              this.querySetting(record.id, 'edit');
            },
          },
          {
            title: '删除',
            onClick: (record) => {
              this.delData(record.id);
            },
          },
        ],
      });
    }
    return (
      <TableC
        columns={columns}
        dataSource={dataSource}
        loading={loading.effects['portfolioOptimizationM/queryMyTableList'] === true}
        rowKey='id'
        onRow={(record) => {
          return {
            onDoubleClick: (event) => {
              this.setState(
                {
                  detailId: record.id,
                },
                () => {
                  this.props.getRow(record);
                },
              );
            }, // 点击行
          };
        }}
        rowClassName={(record) => {
          return record.id === this.state.detailId ? 'row_select1' : '';
        }}
        hidePage={true}
        scroll={{ y: 264 }}
      />
    );
  };

  // 删除
  delData = (id) => {
    this.props.dispatch({
      type: 'portfolioOptimizationM/deleteData',
      payload: { id, fromBarra: this.props.fromBarra },
      callback: () => {
        this.queryMyTableList(); // 刷新列表 重新定位第一条
      },
    });
  };

  // 编辑查看
  querySetting = (e, type) => {
    this.props.onChangeStatus(e, type === 'edit' ? 2 : 3);
  };

  render() {
    const { loading } = this.props;
    return (
      <div>
        <SecondHeaderC title={'组合优化分析列表'} />
        {this.renderTable()}
        <div style={{ margin: '15px 0' }}>
          <InfoTipsC
            Left={
              <div className='mytips'>
                <ExclamationCircleOutlined />
                双击组合优化分析列表某一行，下方显示对应的分析结果
              </div>
            }
            width='100%'
          />
        </div>
      </div>
    );
  }
}
